<template>
    <div>
        <!-- 轮播图区域 -->
        <lunbotu :lunbolist="rotationList" :isfull="true"></lunbotu>

        <!-- 中间的九宫格效果 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newlist">
                    <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/27962/13/1445/4620/5c120b24Edd8c34fe/43ea8051bc50d939.png.webp" alt="">
                    <div class="mui-media-body">京东生鲜</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photolist">
                    <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/17169/3/4127/4611/5c2f35cfEd87b0dd5/65c0cdc1362635fc.png.webp" alt="">
                    <div class="mui-media-body">京东服饰</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodslist">
                    <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t26635/320/1832919204/11533/a2f9878a/5bee366dN1627d554.png.webp" alt="">
                    <div class="mui-media-body">海囤全球</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/29256/16/1420/4265/5c120d2aE83ef9fd4/ca89a8718704215c.png.webp" alt="">
                    <div class="mui-media-body">京东超市</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t16990/157/2001547525/17770/a7b93378/5ae01befN2494769f.png.webp" alt="">
                    <div class="mui-media-body">京东到家</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t22228/270/207441984/11564/88140ab7/5b03fae3N67f78fe3.png.webp" alt="">
                    <div class="mui-media-body">9.9元拼</div>
                </a>
            </li>
		</ul>

    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import lunbotu from '../subcomponents/lunbotu.vue'

export default {
    data() {
        return {
            rotationList: []
        }
    },
    created() {
      this.getRotationList();  
    },
    methods: {
        getRotationList() {

            var list = [ {image:'//imgcps.jd.com/ling4/45988262335/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c13869682acdd181deefee4/450e4b18/cr_1125x549_0_72/s1125x690/q70.jpg', url:'123'}, 
                         {image:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/37785/13/7410/105796/5cc79e32Ebbe142ed/a51bfab68f9bef5d.jpg!cr_1125x549_0_72!q70.jpg.dpg', url:'456'} ];
            this.rotationList = list;
            // 模仿请求,因为这个地方本人没有接口
            // this.$http.get('http://vue.studyit.io/api/getlunbo').then(result => {
            //     if(result.body.status === 0){
            //         Toast('请求成功');
            //     }else{
            //         Toast('请求失败');
            //     }
            // });
        }
    },
    components: {
        lunbotu
    }
}
</script>

<style lang="scss" scoped>
    .mint-swipe{
        height: 150px;

        .mint-swipe-item{
            background-color: pink;
            img{
                width: 100%;
                height: 100%;
            }
        };
        // .mint-swipe-item:nth-child(2){
        //     background-color: blue;
        // }
        // .mint-swipe-item:nth-child(3){
        //     background-color: lightgray;
        // }
        // .mint-swipe-item:nth-child(1){
        //     background-color: green;
        // }

    }

    .mui-grid-view.mui-grid-9{
        background-color: #fff;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: none;
        img{
            width: 60px;
            height: 60px;
        }
        .mui-media-body{
            font-size: 13px;
        }
    }
</style>


